/*
 * @Description: 
 * @Version: 2.0
 * @Author: cxc
 * @Date: 2022-03-29 22:50:59
 * @LastEditors: cxc
 * @LastEditTime: 2022-04-06 16:28:15
 */
import './Department.css'
import React, { useState } from 'react'
import { Row, Col, Table } from 'antd';
import {
  EditOutlined,
  DeleteOutlined,
  WarningOutlined
} from '@ant-design/icons';
import EmployeeHeader from '../../components/employee/employee_header/EmployeeHeader';
import EmployeeConTitle from '../../components/employee/employee_content/EmployeeConTitle';
import EmployeeFooter from '../../components/employee/employee_footer/EmployeeFooter';
import ComButton from '../../components/employee/ComButton';
import RoleAuthModal from '../../components/employee/Modal/RoleAuthModal';
import DeleteComModal from '../../components/employee/Modal/DeleteComModal';
import { alterColor, deleteColor } from './color/employeeColor'


export default function RoleAuthorization() {
  // table
  const columns = [
    { title: '角色名称', dataIndex: 'name', className: 'table_first_title', key: 'name', width: 900, align: 'left' },
    {
      title: '管理',
      dataIndex: '',
      key: 'manager',
      width: 150,
      className: 'table_actions',
      render: (text, record) => (<>
        <Row>
          <Col className="gutter-row" span={12}>
            <ComButton fs='10px' height='30px' size='small' type='primary' btnName='修改' BCcolor={alterColor} icon={<EditOutlined />} handleClick={showModal(0, record)} />
          </Col>
          <Col className="gutter-row" span={12}>
            <ComButton fs='10px' height='30px' size='small' type='primary' btnName='删除' BCcolor={deleteColor} icon={<DeleteOutlined />} handleClick={showModal(2, record)} />
          </Col>
        </Row>
      </>),
    },
  ];
  const data = [
    {
      key: 1,
      name: '总经办',
    },
    {
      key: 2,
      name: '财务部',
    },
    {
      key: 3,
      name: '业务一部',
    },
  ];
  // 模态框
  const [isAddRole, setAddRole] = useState(false)
  const [isAlterRole, setAlterRole] = useState(false)
  const [isDeleteShow, setDeleteShow] = useState(false)
  const [roleName, setRoleName] = useState('')


  function handleClick() { }
  // 显示模态框
  const showModal = (type, row) => {
    // 2是删除，1是新增，0是修改
    return () => {
      switch (type) {
        case 0:
          setAlterRole(true)
          return
        case 1:
          setAddRole(true)
          return
        case 2:
          // 判断是否有关联数据，如果有关联数据，无法删除
          // 有关联数据
          // setIsCantDeleteShow(true)
          // 无关联数据
          setRoleName(row.name)
          setDeleteShow(true)
          return
        default:
          return
      }
    }
  };
  // 新增角色OK
  function handleAddRoleOk() {
    setAddRole(false)
  }
  // 新增角色cancel
  function handleAddRoleCancel() {
    setAddRole(false)
  }
  // 修改角色OK
  function handleAlterRoleOk() {
    setAlterRole(false)
  }
  // 修改角色cancel
  function handleAlterRoleCancel() {
    setAlterRole(false)
  }
  // 删除角色OK
  function handleDeleteOk() {
    console.log(roleName);
    setDeleteShow(false)
  }
  // 删除角色cancel
  function handleDeleteCancel() {
    setDeleteShow(false)
  }
  return (
    <>
      {/* 头部 */}
      <Row>
        <Col span={24}>
          <EmployeeHeader />
        </Col>
      </Row>
      {/* 内容标题 */}
      <Row >
        <Col span={24} className='con_title'>
          <EmployeeConTitle title1='所有权限' title2='新增权限值' handleClick={showModal(1)} />
        </Col>
      </Row>
      {/* 内容 */}
      <Row>
        <Col span={24}>
          <Table
            className='depart_theadSty '
            columns={columns}
            dataSource={data}
            pagination={{ position: ['none', 'none'] }}
            bordered
          />
        </Col>
      </Row>
      {/* 分页 */}
      <Row>
        <Col span={24}>
          <EmployeeFooter></EmployeeFooter>
        </Col>
      </Row>
      {/* 模态框 */}
      <RoleAuthModal
        visible={isAddRole}
        title='新增权限信息'
        tableTitle='新增角色'
        onOk={handleAddRoleOk}
        onCancel={handleAddRoleCancel}
      />
      <RoleAuthModal
        visible={isAlterRole}
        title='修改权限信息'
        tableTitle='修改角色'
        onOk={handleAlterRoleOk}
        onCancel={handleAlterRoleCancel}
      />
      <DeleteComModal
        title='消息'
        visible={isDeleteShow}
        onOk={handleDeleteOk}
        onCancel={handleDeleteCancel}
        icon={<WarningOutlined style={{ color: 'white', fontSize: '25px', marginLeft: '1px', marginBottom: '2px' }} />}
        content={`确认删除${roleName}吗？此操作不可恢复！请确认已将基本资料转移给他人！`}

      />
    </>
  )
}
